<template>
	<div class="detail">
		　　<div id="loading-mask" v-show="loading">
			　　　　<div class="loading-wrapper">
				　　　　　　<span class="loading-dot loading-dot-spin">
					<i></i><i></i><i></i><i></i>
					　　　　　　</span>
				<p style="margin-top:30px;font-size: 20px;"> 正在加载...</p>
			</div>
			　　
		</div>
		<!-- v-loading="loading" -->
		<div class="bgAndTitle">
			<div class="topConter">
				<div style="margin-top: 250px; text-align: center; ">
					<div style="font-size: 30px;font-weight: 700;">{{ArticeDateil.title}}
						<!-- <span v-if="ArticeDateil.isInspect==0 && UserID==ArticeDateil.userInfo.id"
							style="color: #00a854;">(审核中)</span>
						<span v-if="ArticeDateil.isInspect==2
						&& UserID==ArticeDateil.userInfo.id" style=" color: rgb(238, 49, 49);">(审核未通过)</span> -->
					</div>
					<div style="margin-top: 10px;">
						<i class="iconfont icon-shijian"></i>
						<span style="font-size: 15px;">{{ArticeDateil.createDate}}</span>
					</div>
					<div style="margin-top: 10px;">
						<span>阅读 : {{ArticeDateil.viewCounts}}</span> |
						<span>评论 : {{commentsList.length}}</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 背景加标签出完成 -->
		<!-- v-loading="loading" -->
		<div class="container">
			<div class="conter">
				<div class="left">
					<div>
						<div class="topUpdateIcon">
							<div>
								<span></span><span></span><span></span>
							</div>
							<div v-if="ShowisUpdate" @click="gotoUpdate">
								<i class="iconfont icon-tianxie icon"></i>
							</div>
						</div>
						<div v-html="content" v-viewer class="markdown-body html-content"></div>
					</div>
				</div>

				<div class="right">
					<div class="UserInfo">
						<div
							style="text-align: center;height: 150px;width: 150px;overflow: hidden;border-radius: 200px;margin: 0 auto;">
							<img :src="Userinfo.avatar" alt="" height="150px" width="150px">
						</div>
						<div style="margin-top: 10px;text-align: center;font-size: 20px;">
							{{Userinfo.nickname}}
						</div>
						<div style="text-align: center;">
							<div style="padding: 10px 10px 10px 0px;">
								作者联系方式:{{Userinfo.email}}
							</div>
							<div style="padding-bottom: 10px;">
								来过时间:{{Userinfo.lastLogin}}
							</div>
						</div>
						<div style="height: 20px;">
						</div>
					</div>
					<div class="newAndHot">
						<el-row style="padding: 10px;">
							<span style="font-size: 18px;font-weight: 600;">
								<i class="iconfont icon-shijian"></i>
								最新文章
							</span>
						</el-row>

						<div v-for="(item,index) in newArticles" :key="item.id" style="height: 30px;padding-left: 5px; padding-top: 8px;
						font-size: 13px; cursor: pointer;
						border-bottom: 1px solid gainsboro;" @click="gotoThis(item.id)">
							{{item.title}}
						</div>
						<el-row style="padding: 10px;">
							<span style="font-size: 18px;font-weight: 600;">
								<i class="iconfont icon-wenzhang1"></i>
								最热文章
							</span>
						</el-row>

						<div v-for="(i,index) in hotArticles" style="height: 30px;padding-left: 5px; padding-top: 8px;
						font-size: 13px; cursor: pointer;
						border-bottom: 1px solid gainsboro;" @click="gotoThis(i.id)">
							{{i.title}}
						</div>
					</div>

					<div class="catalogue" ref="catalogue">
						<!-- -->
						<div class="toc">
							<el-row style="padding: 10px 3px 10px 2px;">
								<span style="font-size: 18px;font-weight: 600;">
									<i class="iconfont icon-fenlei"></i>
									文章目录
								</span>
							</el-row>
							<!-- 遍历目录 -->
							<!-- 	<div v-for="toc in tocs" :key="toc.href" class="hrefItem">
								<a @click="scrollToPosition(toc.href)" v-html="toc.name"></a>
							</div> -->
							<el-tree class="tree" ref="tree" node-key="uuid" :data="treeData" :props="defaultProps"
								@node-click="nodeClick" default-expand-all>
								<div class="custom-tree-node" slot-scope="{ node, data }" :title="data.text">
									<!-- <div></div> -->
									<p>{{ data.text }}</p>
								</div>
							</el-tree>
						</div>
					</div>
				</div>

			</div>

			<div style="height: 50px;background-color: #f0f9eb;text-align: center;line-height: 50px;
			font-size: 15px; color: #b2d77e; margin: 10px 0px; border-radius: 15px;
			">
				文章end...
			</div>

			<div class="tag">
				<el-row style="padding: 10px;font-size: 15px;">
					<i class="iconfont icon-biaoqian"></i>
					标签:
					<span class="tag-title" v-for="(item,index) in ArticeDateil.tags">
						{{item.tagName}}
					</span>
				</el-row>

				<el-row style="padding: 10px;font-size: 15px;">
					<i class="iconfont icon-fenlei"></i>
					文章分类:
					<span class="tag-title" v-for="(item,index) in categorys">
						{{item.categoryName}}
					</span>
				</el-row>
			</div>

			<!-- 评论 -->
			<div class="comments">
				<p style="text-align: center;padding: 10px 0px;  color: #b2d77e;font-weight: 700;font-size: 15px;">
					评论({{commentsList.length}})</p>
				<!-- 评论input框组件 -->
				<comments ref="comment" @getList="getList" :isComment="isComment" :ArticeId="articeid" :ToUserId="Userinfo.id">
				</comments>
				<el-divider></el-divider>
				<div class="commentsList">
					<div v-for="(item,index) in commentsList" :key="index">
						<el-row style="padding: 10px;">
							<el-col :span="1">
								<el-avatar :size="50" :src="item.author.avatar" />
							</el-col>
							<el-col :span="22">
								<div style="height: 30px;margin-top: 2px;margin-left: 10px;">
									<p style="font-size: 15px;font-weight: 700;">{{item.author.nickname}}</p>
									<p style="color: gray;">{{commentsList.length-index}} 楼&nbsp; {{item.createDate}}
									</p>
								</div>
							</el-col>
							<el-col :span="1" v-if="UserID==item.author.id">
								<el-popconfirm confirm-button-text='YES' cancel-button-text='NO' icon="el-icon-info" icon-color="red"
									title="这是一段内容确定删除吗？" @confirm="delComment(item)">
									<el-button slot="reference" icon="el-icon-delete" style="border:0"></el-button>
								</el-popconfirm>
							</el-col>
						</el-row>

						<el-row style="margin-top: 10px;font-size: 15px;margin-left: 10px;padding-bottom: 10px;">
							<span style="color: cornflowerblue;"> </span> {{item.content}}
						</el-row>
						<!-- 如何不是本人显示出现按钮 -->
						<el-row v-if="UserID!=item.author.id">
							<span @click="showComment(item)"
								style="color: gray; cursor: pointer;padding-left: 10px;padding-top: 10px;font-size: 15px;">回复</span>
						</el-row>
						<!-- 二级评论 -->
						<div class="commentstlevel2" v-if="item.childrens!=undefined&&item.childrens.length!=0">
							<div v-for="(c,index) in item.childrens" style="margin-left: 10px;padding: 10px 0px;">
								<div style="font-size: 14px">
									<span class="me-reply-user">{{c.author.nickname}}</span>
									<!-- 设置本人 -->
									<span v-if="UserID==c.author.id" style="color: red;">(本人)</span>
									<span v-if="c.level == 2" class="me-reply-user">:&nbsp;&nbsp;@{{c.toUser.nickname}} </span>
									<span>{{c.content}}</span>
									<!-- 设置删除 -->

									<el-popconfirm confirm-button-text='YES' cancel-button-text='NO' icon="el-icon-info"
										v-if="UserID==c.author.id" icon-color="red" title="这是一段内容确定删除吗？" @confirm="delComment(c)">
										<el-button slot="reference" icon="el-icon-delete" style="border:0"></el-button>
									</el-popconfirm>

								</div>
								<div class="me-view-meta">
									<span style="padding-right: 10px;color: gray; ">{{c.createDate}}</span>
									<!-- 评论人id不等于登录人id时并且是最否一条数据 -->
									<a class="me-view-comment-tool" v-if="UserID!=c.author.id && index==item.childrens.length -1"
										style="cursor: pointer;" @click="showComment(c)">
										<i class="me-icon-comment"></i>&nbsp;回复
									</a>
								</div>
								<el-divider style="margin-top: 10px;"></el-divider>
							</div>
						</div>
						<el-divider></el-divider>
					</div>
				</div>
			</div>
		</div>

		<!-- <el-backtop :bottom="200" /> -->

		<!-- 回复 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
			<div>
				<el-input :placeholder="dialogTitle" v-model="dialogContext"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">算了</el-button>
				<el-button type="primary" @click="issue">发布</el-button>
			</span>
		</el-dialog>

		<goback :right="40" :bottom="120" />
		<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;" @click="backtop"></div>
	</div>
</template>

<script>
	import {
		marked
	} from 'marked'
	import $ from 'jquery'
	import comments from '../components/comments/comments.vue'
	//显示高亮
	// import "../assets/css/github-markdown-light.css"
	import prism from "prismjs";

	export default {
		components: {
			comments
		},
		data() {
			return {
				tocs: [],
				TopTitle: {},
				ArticeDateil: {},
				contents: "",
				aData: [],
				toolbars: {
					fullscreen: true, // 全屏编辑
					readmodel: true, // 沉浸式阅读
				},
				categorys: [],
				commentsList: [],
				commentShow: false,
				leveTowText: "",
				dialogVisible: false,
				dialogTitle: '',
				dialogContext: '', //回复内容
				commentsParams: { //回复参数
					articleId: null,
					authorId: null,
					content: "",
					parent: null,
					toUserId: null //给谁评价
				},
				newArticles: [], //最新
				hotArticles: [], //最热
				Userinfo: {}, //作者信息
				isComment: null, //可不可评论
				imgshow: false,
				dialogImageUrl: '',
				ShowisUpdate: false,
				treeData: [],
				defaultProps: {
					label: 'text',
					children: 'children',
				},
				loading: true,
				articeid: {},
				hasCreatedToolbars: false // 标志变量

			};
		},
		watch: {
			contents(news, olb) {
				this.$nextTick(() => {
					this.loading = false
					if (!this.hasCreatedToolbars) {
						this.createToolbars();
						this.hasCreatedToolbars = true; // 设置标志变量
					}
				})
			},
			$route(newVal, obl) {
				// this.hasCreatedToolbars = false
				this.getMarkDownBoby(this.$route.params.id)
				this.getCommentList(this.$route.params.id)
			}
		},
		computed: {
			Img() {
				return this.$store.state.UserInfo.avatar
			},
			UserName() {
				return this.$store.state.UserInfo.nickname
			},
			UserID() {
				return this.$store.state.UserInfo.id
			},
			content() {
				var reg = new RegExp("<pre", "g")
				var content = marked(this.contents)
				var str = content.replace(reg, `<pre class='line-numbers'`)
				return str
			}
		},
		created() {
			this.getMarkDownBoby(this.$route.params.id)
			this.getCommentList(this.$route.params.id)
		},
		mounted() {
			debugger
			// location.reload()
			// Canvas()\
			this.editorToolBarToFixedWrapper = this.$_.throttle(this.ToFixed, 100)
			window.addEventListener('scroll', this.editorToolBarToFixedWrapper, false);

		},
		methods: {
			//创建dom
			createToolbars() {
				debugger
				// 动态创建dom 元素
				const toolbars = document.getElementsByClassName("toolbar");
				for (let i = 0; i < toolbars.length; i++) {
					const newToolbarItem = document.createElement("div");
					newToolbarItem.className = "toolbar-item";
					const newSpan = document.createElement("span");
					newSpan.textContent = "代码解读";
					newToolbarItem.appendChild(newSpan);
					// 绑定点击事件
					newToolbarItem.addEventListener('click', () => {
						let comment = toolbars[i].parentElement.querySelector('pre').querySelector('code').innerText
						// TODO 交给ai解释
						if (!this.$store.state.aipopIsShow) {
							this.$store.dispatch("aiShow")
						}
						this.$bus.$emit("sendAi", comment + "   解释下这段代码")
					});
					toolbars[i].appendChild(newToolbarItem);
				}
			},
			ToFixed() {
				let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
				if (curHeight >= 1300) {
					document.querySelector(".UserInfo").style.display = "none";
					document.querySelector(".newAndHot").style.display = "none";
					// catalogue
					document.querySelector(".catalogue").style.display = "block"
					document.querySelector(".catalogue").style.height = "100%"
				} else {
					document.querySelector(".UserInfo").style.display = "block";
					document.querySelector(".newAndHot").style.display = "block";
					document.querySelector(".catalogue").style.display = "none";
				}
				// 小猫返回顶部
				if (curHeight > 500) {
					$('.back-to-top').css('top', '-200px');
					// $('.back-to-top').fadeIn();
				} else {
					$('.back-to-top').css('top', '-999px');
					// $('.back-to-top').fadeOut();
				}
			},
			// 修改图标
			gotoUpdate() {
				this.$router.push({
					path: `/UpdateArticle`,
					query: {
						Bid: this.$route.params.id
					}
				})
			},
			showImg(e) {
				if (e.target.nodeName == 'IMG') { //判断点击富文本内容为img图片
					this.imgshow = true
					this.dialogImageUrl = e.target.currentSrc

				} else {
					this.imgshow = false
					// console.log("点击内容不为img")
				}
			},
			getCommentList(id) {
				debugger
				this.$api.detail.getcommentsList(id).then(res => {
					if (res.code == 200) {
						// console.log("获取到的数据");
						this.commentsList = []
						this.commentsList = res.data
					}
				})
			},
			getMarkDownBoby(id) {
				let _this = this;
				this.$api.detail.getDateil(id).then(res => {
					if (res.code == 200) {
						// if (document.querySelector(".icon") != null) {
						// 	document.querySelector(".icon").remove()
						// }
						//判断是否是本文章的作者，如果是那就出现修改标志
						if (this.UserID == res.data.userInfo.id) {
							this.ShowisUpdate = true
						}

						this.ArticeDateil = res.data
						this.articeid = res.data.id
						//设置作者id

						this.contents = res.data.body.content
						// setTimeout(() => {
						// 	Prism.highlightAll()
						// }, 100)
						this.$nextTick(() => {
							Prism.highlightAll();// 全局代码高亮
						});
						this.isComment = res.data.isComment
						this.getHotAndNew()
						//生成目录
						this.$nextTick(() => {
							this.getCatalog()
						})
						window.scrollTo(0, -1);
						this.Userinfo = res.data.userInfo
						if (res.data.categorys.length != 0) {
							this.categorys = res.data.categorys
						} else {
							this.categorys.push({
								categoryName: '暂无'
							})
						}
					}
				})
			},
			getHotAndNew() { //获取最新文章和最热文章
				this.$api.detail.newArticles().then(res => {
					if (res.code == 200) {
						this.newArticles = res.data
					}
				})
				this.$api.detail.hotArticles().then(res => {
					if (res.code == 200) {
						this.hotArticles = res.data
					}
				})
			},
			// 点击出现显示回复输入框
			showComment(item) {
				console.log(item);
				this.dialogTitle = "回复:" + item.author.nickname
				this.dialogVisible = true
				//表示谁写的
				this.commentsParams.authorId = this.UserID
				// 父id
				this.commentsParams.parent = item.parentId
				//写给谁的
				this.commentsParams.toUserId = item.author.id
			},
			//发布回复
			issue() {
				this.commentsParams.articleId = this.ArticeDateil.id
				this.commentsParams.content = this.dialogContext
				// this.commentsParams.leve = 2
				console.log(this.commentsParams);
				if (this.isComment !== 1) {
					return this.$message.warning("本文作者已关闭评论功能！")
				}
				this.$api.detail.createComments(this.commentsParams).then(res => {
					if (res.code == 200) {
						this.dialogContext = ""
						this.dialogVisible = false
						this.$message.success("评论成功")
						this.getCommentList(this.$route.params.id)
					}
				})
			},
			getList() {
				this.getCommentList(this.$route.params.id)
			},
			// 删除评价
			delComment(item) {
				this.$api.detail.deleteComment(item.id).then(res => {
					if (res.code == 200) {
						this.getCommentList(this.$route.params.id)
					}
				})
			},
			gotoThis(id) {
				this.getCommentList(id)
				this.getMarkDownBoby(id)
				this.$router.push({
					name: "articleDetail",
					params: {
						id: id
					}
				})
				//刷新页面
				// window.location.reload()
			},
			// 根据内容获取目录
			getCatalog() {
				const h = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a']
				var elements = $(':header')
				if (elements.length == 0) {
					return
				}
				let hElements = []
				for (const key of elements) {
					if (h.indexOf(key.localName) > -1) {
						let text
						if (key.children && key.children.length) {
							text = this.getText(key.children)
						} else {
							text = key.innerHTML
						}
						hElements.push({
							hLevel: parseInt(key.localName[1]),
							text,
							id: key.localName,
							uuid: key.id,
						})
					}
				}
				// console.log('hElements:', hElements)
				let result = this.toTree(hElements)
				this.treeData = result

				// 目录默认选中第一个
				this.$nextTick(() => {
					if (!result) return
					this.$refs.tree.setCurrentKey(result[0].uuid)
				})
				// console.log('result:', result)
			},
			toTree(flatArr) {
				var tree = []
				var copyArr = flatArr.map(function (item) {
					return item
				})

				// 根据指定级别查找该级别的子孙级，并删除掉已经查找到的子孙级
				var getChildrenByLevel = function (currentLevelItem, arr, level) {
					if (!currentLevelItem) {
						return
					}
					// 将level值转成负数，再进行比较
					var minusCurrentLevel = -currentLevelItem.hLevel
					var children = []
					for (var i = 0, len = arr.length; i < len; i++) {
						var levelItem = arr[i]
						if (-levelItem.hLevel < minusCurrentLevel) {
							children.push(levelItem)
						} else {
							// 只找最近那些子孙级
							break
						}
					}
					// 从数组中删除已经找到的那些子孙级，以免影响到其他子孙级的查找
					if (children.length > 0) {
						arr.splice(0, children.length)
					}
					return children
				}

				var getTree = function (result, arr, level) {
					// 首先将数组第一位移除掉，并添加到结果集中
					var currentItem = arr.shift()

					currentItem.level = level
					result.push(currentItem)
					while (arr.length > 0) {
						if (!currentItem) {
							return
						}
						// 根据当前级别获取它的子孙级
						var children = getChildrenByLevel(currentItem, arr, level)
						// 如果当前级别没有子孙级则开始下一个
						if (children.length == 0) {
							currentItem = arr.shift()
							currentItem.level = level
							if (currentItem) {
								result.push(currentItem)
							}
							continue
						}
						currentItem.children = []
						// 查找到的子孙级继续查找子孙级
						getTree(currentItem.children, children, level + 1)
					}
				}
				getTree(tree, copyArr, 1)
				return tree
			},
			getText(arr) {
				let result = null
				if (!arr.length) return
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].children && arr[i].children.length) {
						result = this.getText(arr[i].children)
					} else {
						result = arr[i].innerHTML
					}
				}

				return result
			},
			nodeClick(val) {
				let top = document.getElementById(val.uuid).offsetTop + 480
				$("html,body").animate({
					scrollTop: top
				}, 500);
			},
			// 小猫返回顶部
			backtop() {
				$('body,html').animate({
					scrollTop: 0
				}, 600);
			}
		},
		// 销毁把  canvas消除
		beforeDestroy() {
			window.removeEventListener('scroll', this.editorToolBarToFixedWrapper, false) //删除滚动事件
		}
	};
</script>
<style lang="less" scoped>
	/* @import "../assets/css/github-markdown-light.css"; */

	#loading-mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: #fff;
		user-select: none;
		z-index: 9999;
		overflow: hidden;
	}

	.loading-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
	}

	.loading-dot {
		animation: antRotate 1.2s infinite linear;
		transform: rotate(45deg);
		position: relative;
		display: inline-block;
		font-size: 80px;
		width: 80px;
		height: 80px;
		box-sizing: border-box;
	}

	.loading-dot i {
		width: 33px;
		height: 33px;
		position: absolute;
		display: block;
		background-color: #1890ff;
		border-radius: 100%;
		transform: scale(0.75);
		transform-origin: 50% 50%;
		opacity: 0.3;
		animation: antSpinMove 1s infinite linear alternate;
	}

	.loading-dot i:nth-child(1) {
		top: 0;
		left: 0;
	}

	.loading-dot i:nth-child(2) {
		top: 0;
		right: 0;
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.loading-dot i:nth-child(3) {
		right: 0;
		bottom: 0;
		-webkit-animation-delay: 0.8s;
		animation-delay: 0.8s;
	}

	.loading-dot i:nth-child(4) {
		bottom: 0;
		left: 0;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	@keyframes antRotate {
		to {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}

	@-webkit-keyframes antRotate {
		to {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}

	@keyframes antSpinMove {
		to {
			opacity: 1;
		}
	}

	@-webkit-keyframes antSpinMove {
		to {
			opacity: 1;
		}
	}

	/* 小猫 */
	@import url("../utils/backtop.css");
	@import url("../assets/css/github-markdown-light.css");

	/deep/ .icon {
		padding: 10px;
		cursor: pointer;
		color: gray;
		font-size: 18px;
	}


	/deep/ .v-note-wrapper .v-note-panel .v-note-navigation-wrapper {
		display: none !important;
	}

	.bgAndTitle {
		min-width: 100%;
		height: 500px;
		background: url(https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/articleDetali.png) no-repeat;
		background-size: cover;
		/* // background-attachment: fixed; */
		overflow: hidden;
		/* // background-clip: padding-box; */
	}


	.topConter {
		width: 1250px;
		height: 500px;
		border: 1px solid transparent;
		margin: 0 auto;
		position: relative;

	}

	.container {
		width: 1250px;
		/* // border: 1px solid red; */
		min-height: 700px;
		margin: 10px auto;
		box-sizing: border-box;
		/* // display: flex;
  // justify-content: space-between; */
		position: relative;
		/* // overflow: auto; */
	}

	.conter {
		width: 1250px;
		min-height: 700px;
		display: flex;

		/* // border: 1px solid red; */
		.topUpdateIcon {
			height: 30px;
			display: flex;
			justify-content: space-between;
			line-height: 30px;
			margin-bottom: 10px;
			/* // background-color: #181818; */
			border-bottom: 1px solid gainsboro;

			div {
				padding: 0 5px;

				span {
					height: 20px;
					width: 20px;
					border-radius: 20px;
					display: inline-block;

					margin: 5px;
				}

				span:nth-child(1) {
					background: red;
				}

				span:nth-child(2) {
					background: sandybrown;
				}

				span:nth-child(3) {
					background: limegreen;
				}
			}
		}
	}

	.conter .left {
		height: auto;
		width: 1000px;
	}

	.conter .right {
		width: 230px;
		height: 800px;
		margin-left: 15px;
		position: sticky;
		top: 10px;

		.catalogue {
			z-index: 1000;
			/* // margin-top: 20px; */
			height: 245px;
			background-color: white;
			box-shadow: 0px 0px 10px gainsboro;

			overflow-x: hidden;
			overflow-y: scroll;
			border-radius: 10px;


			.toc {
				padding: 10px;
				font-size: 13px;

				a:hover {
					color: #78b6f7;
				}
			}

		}

		.UserInfo {
			height: auto;
			width: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 0 10px gainsboro;
		}

		.newAndHot {
			height: auto;
			width: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 0 10px gainsboro;
			margin-top: 10px;
		}

	}

	.topUserInfo {
		height: 300px;
		background-color: white;
		box-shadow: 0px 0px 10px gainsboro;
		border-radius: 10px;
		text-align: center;
	}

	.title {
		display: flex;
		justify-content: flex-end;
		margin-top: 17px;
		font-size: 15px;
	}

	.title div {
		flex: 1;
	}



	/deep/ .el-divider--horizontal {
		margin: 0;
	}

	.tag {
		height: auto;
		padding: 10px 0;
		width: 100%;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0px 0px 10px gainsboro;
	}

	.tag .tag-title {
		display: inline-block;
		border-radius: 10px;
		height: 20px;
		padding: 5px 10px 5px 10px;
		/* // width: 50px; */
		line-height: 20px;
		text-align: center;
		background-color: #f0f9eb;
		margin: 0 5px;
		color: #b2d77e;
		cursor: pointer;
	}

	.comments {
		width: 100%;
		min-height: 200px;
		background-color: white;
		box-shadow: 0px 0px 10px gainsboro;
		margin-top: 10px;
	}

	.commentsList {
		height: auto;
		width: 100%;
		background-color: white;
		/* // padding: 10px; */
	}

	.commentstlevel2 {
		height: auto;
		width: 100%;
		border-left: 3px solid gainsboro;
		min-height: 100px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	.me-view-comment-tools {
		margin-top: 4px;
		margin-bottom: 10px;
	}

	.me-view-comment-tool {
		font-size: 13px;
		color: #a6a6a6;
		padding-right: 14px;
	}

	.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
	.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
		background: #fff !important;
	}

	.me-reply-list {
		padding-left: 16px;
		border-left: 4px solid #c5cac3;
	}

	.me-reply-item {
		margin-bottom: 8px;
		border-bottom: 1px solid #f0f0f0;
	}

	.me-reply-user {
		color: #78b6f7;
	}

	.me-view-comment-write {
		margin-left: 10px;
	}

	.code-div {
		width: 100%;
		overflow: auto;
		padding: 10px;
	}

	/deep/ .markdown-body {
		background-color: #f8f8f8 !important;
		padding: 0 5px;
		box-shadow: 0 10px 10px gainsboro;

		blockquote {
			border-left: 5px solid #78b6f7;
			padding: 10px;
		}

		pre {
			background: #272822 !important;
		}

		p code {
			padding: 8px;
			color: red;
			font-size: 15px;
			background-color: #f0f0f0;
		}
	}
</style>